<template>
	<a-timeline class="app-calendar-timeline">
		<a-timeline-item v-for="event in events" @click="handleEventClick(event)">
			<div class="timeline__item">
				<div class="time">{{ event.start }}</div>
				<div class="timeline__item__content">
					<template v-if="hasSlot('default')">
						<slot name="default" :item="event"></slot>
					</template>
					<template>
						<h4>{{ event.title }}</h4>
						<p class="content__description">{{ event.content }}</p>
					</template>
				</div>
			</div>
		</a-timeline-item>
	</a-timeline>
</template>
<script setup lang="ts">
import { calendarTimelineProps } from './calendar-timeline';
import { IParam } from '@/core';

const props = defineProps(calendarTimelineProps);

const emit = defineEmits<{
	(name: 'clickEvent', args: IParam): void;
}>();

const events = computed(() => {
	return props.store.events;
});

/**
 * 点击
 */
const handleEventClick = (args: IParam) => {
	emit('clickEvent', args);
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};
</script>
